<template>
    <div class="fillContainer">
        <div class="table_container">
            <el-table
            v-if="tableData.length > 0"
            :data="tableData"
            max-height="450"
            border
            style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
                <el-table-column label="创建时间" align="center" width="250" prop="created_at">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="类型名字" align="center" width="150"></el-table-column>
                <el-table-column prop="info" label="描述" align="center" width="180"></el-table-column>
                <el-table-column prop="_id" label="ObjectID" align="center" width="250"></el-table-column>
                <el-table-column prop="operation" width="160" label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                        type="warning"
                        size="small"
                        icon="edit"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="small"
                        type="danger"
                        con="delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <div class="block">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="paginations.page_index"
                                :page-sizes="paginations.page_sizes"
                                :page-size="paginations.page_size"
                                :layout="paginations.layout"
                                :total="paginations.total"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <Dialog :dialog="dialog" :formData="formData" @update="getGoodType"></Dialog>
    </div>
</template>

<script>
import Dialog from '../components/Dialog';
export default {
    name: 'goodTypeList',
    data(){
        return {
            paginations: {
                page_index: 1, // 当前位于页
                total: 0, // 页总数
                page_size: 5, // 一页显示总数
                page_sizes: [5,10,15,20], // 每页显示多少条
                layout: 'total, sizes, prev, pager, next, jumper'
            },
            tableData: [],
            alltableData: [],
            formData: {
                name: '',
                info: '',
                id: ''
            },
            dialog: {
                show: false,
                title: '',
                option: 'edit'
            },
            filterTableData: [],
        };
    },
    created(){
        this.getGoodType();
    },
    computed: {
        user(){
            return this.$store.getters.user;
        }
    },
    methods:{
        getGoodType(){
            // 获取表格数据
            this.$axios
            .get('/api/equipments/types/get')
            .then(res => {
                this.alltableData = res.data;
                this.filterTableData = res.data;
                // 设置分页数据
                this.setPaginations();
            })
            .catch(err => console.log(err));
        },
        handleEdit(index, row){
            // 编辑
            this.dialog = {
                show: true,
                title: '修改物品类型',
                option: 'edit'
            };
            this.formData = {
                name: row.name,
                info: row.info,
                id: row._id
            };
        },
        handleDelete(index, row){
            this.$axios.delete(`/api/equipments/types/delete/${row._id}`)
            .then(res => {
                this.$message('删除成功!');
                this.getGoodType();
            });
        },
        handleAdd(){
            this.dialog = {
                show: true,
                title: '添加物品类型信息',
                option: 'add'
            };
            this.formData = {
                name: '',
                info: '',
                id: ''
            };
            this.dialog.show = true;
        },
        handleSizeChange(page_size) {
            // 切换size
            this.paginations.page_index = 1;
            this.paginations.page_size = page_size;
            this.tableData = this.alltableData.filter((item,index) => {
                return index < page_size;
            });
        },
        handleCurrentChange(page) {
            // 获取当前页
            let index = this.paginations.page_size * (page - 1);
            // 数据的总数
            let nums = this.paginations.page_size * page;
            // 容器
            let tables = [];

            for(let i = index; i < nums; i++){
                if(this.alltableData[i]){
                    tables.push(this.alltableData[i]);
                }
            }
            this.tableData = tables;
        },
        setPaginations() {
            // 分页属性设置
            this.paginations.total = this.alltableData.length;
            this.paginations.page_index = 1;
            this.paginations.page_size = 5;
            // 设置默认分页的数据
            this.tableData = this.alltableData.filter((item,index) => {
                return index < this.paginations.page_size;
            });
        },
    },
    components: {
        Dialog
    }
}
</script>

<style scoped>
.fillContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>

